<template>
  <div>
    <h3>根据模块和开班时间定制课表</h3>
    <el-form :model="form" :rules="rules" ref="formParms" label-width="80px">
      <el-form-item label="课程模块" prop="model">
        <el-select
          v-model="form.model"
          placeholder="请选择课程模块"
          style="width: 13%"
        >
          <el-option
            v-for="model in models"
            :key="model.id"
            :label="model.name"
            :value="model.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教员选择" prop="teacher">
        <el-checkbox-group v-model="form.teacher" style="width: 13%">
          <el-checkbox
            v-for="teacher in teachers"
            :key="teacher.id"
            :label="teacher.name"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item prop="date" label="开课日期">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="form.date"
          style="width: 13%"
        ></el-date-picker>
      </el-form-item>
      <el-form-item prop="time" label="开课时间">
        <el-select
          v-model="form.time"
          placeholder="上课时间"
          style="width: 13%"
        >
          <el-option
            v-for="(time, index) in times"
            :key="index"
            :label="time"
            :value="time"
          ></el-option
        ></el-select>
      </el-form-item>
      <el-form-item prop="classNum" label="班级号">
        <el-select
          v-model="form.classNum"
          placeholder="请选择班级号"
          filterable
          allow-create
          default-first-option
        >
          <el-option
            v-for="(classNum, index) in classNums"
            :key="index"
            :label="classNum"
            :value="classNum"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="paikeMethod('formParms')"
          >立即排课</el-button
        >
        <el-button type="primary" @click="paikeReset('formParms')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import modelApi from "@/api/paike/model";
import paikeApi from "@/api/paike/getPaike";
export default {
  data() {
    return {
      form: {
        model: "",
        teacher: [],
        date: "",
        time: "",
        classNum: "",
      },
      models: [],
      teachers: [],
      classNums: [],
      times: ["08:30-10:30", "10:30-12:30", "13:30-15:30", "15:30-17:30"],
      rules: {
        model: [{ required: true, message: "请输入课程模块", trigger: "blur" }],
        teacher: [{ required: true, message: "请选择教员", trigger: "blur" }],
        date: [{ required: true, message: "请选择日期", trigger: "blur" }],
        time: [{ required: true, message: "请选择时间", trigger: "blur" }],
        classNum: [
          { required: true, message: "请选择班级号!", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    ifTheDateIsBeforeToday(date) {
      // 获取当前日期
      let today = new Date();
      // 仅比较日期部分，忽略时间部分
      today.setHours(0, 0, 0, 0);
      today.setHours(0, 0, 0, 0);
      // 判断目标日期是否在今天之前
      console.log(date, today);
      return date < today;
    },
    /**
     * 向服务器发送请求进行排课，排完课返回一个EXCEL文件，要求用户检查完后上传回来
     */
    startPaike: async function (model, teacher, date, time, remark) {
      const params = { model, teacher, date, time, remark };
      let res = await paikeApi.startPaike(params);
    },
    paikeMethod: async function (formParms) {
      this.$refs[formParms].validate((valid) => {
        if (valid) {
          let { model, teacher, date, time } = this.form;
          let remark = this.form.classNum;
          const formattedDate = new Date(date);
          const dayOfWeek = formattedDate.getDay();
          if (this.ifTheDateIsBeforeToday(date)) {
            this.$message({
              message: "无法从过去开始排课！",
              type: "warning",
            });
            return;
          }
          if (model == "M1") {
            //M1通常不会在周六日开班
            if (dayOfWeek == 0 || dayOfWeek == 6) {
              this.$message({
                message: "请不要把M1安排在周末开课！",
                type: "warning",
              });
              return;
            }
          } else {
            if (dayOfWeek == 0) {
              this.$message({
                message: "请不要安排在周日上课！",
                type: "warning",
              });
              return;
            } else if (this.form.teacher.length == 1) {
              this.$message({
                message: "一个教员完成不了教学任务！",
                type: "warning",
              });
              return;
            }
          }
          this.startPaike(model, teacher, date, time, remark);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    paikeReset: async function (form) {
      this.$refs[form].resetFields();
    },
    getModelDetail: async function () {
      let res = await modelApi.getModel();
      if (res.code == 20000 && res.message == "成功") {
        console.log(res.data);
        this.models = res.data;
        console.log(this.models);
      } else {
        this.message({
          message: `${res.message}`,
          type: "warning",
        });
      }
    },
    /**
     * 根据传入的模块名称查询到获得该模块授权的教员
     */
    getAuthorizedTeacher: async function (model) {
      this.teachers = [];
      let res = await modelApi.getAuthorizedTeacher(model);
      if (res.code == 20000 && res.message == "成功") {
        console.log(res.data);
        this.teachers = res.data;
      } else {
        this.message({
          message: `${res.message}`,
          type: "warning",
        });
      }
    },
    //获得班级编号，班级编号是sql中lessonsrecord的remark字段
    getClassNum: async function () {
      let res = await modelApi.getClassnum();
      if (res.code == 20000 && res.message == "成功") {
        this.classNums = res.data;
      } else {
        this.message({
          message: `${res.message}`,
          type: "warning",
        });
      }
    },
  },
  watch: {
    "form.model"(model) {
      console.log(model);
      if (model == "M1") {
        this.form.time = "09:00-10:00";
        this.times = ["09:00-10:00"];
      } else {
        this.form.time = "";
        this.times= ["08:30-10:30", "10:30-12:30", "13:30-15:30", "15:30-17:30"]
      }
      this.getAuthorizedTeacher(model);
    },
  },
  created() {
    // 在实例创建完成后执行的逻辑
    this.getModelDetail();
    this.getClassNum();
  },
};
</script>

<style>
</style>